<template>
    <div class="cartControlBox">
        <div :class="['cartControl', {'disable':disable}]">
            <div class="cartIcon" @click="showDetailHandler"><i class="num" v-if="shoppingList.length>0">{{sumProduct}}</i></div>
            <div class="orderInfo">
                <div class="price">&yen; {{sumPrice}}</div>
                <div class="detailBtn" @click="showDetailHandler">订单明细</div>
            </div>
            <div class="orderBtn" @click="toOrder">下单</div>
        </div>
        <!-- <div class="tipBox">xxx删除 沙茶牛肉干粿 X1</div> -->
        <orderBox v-show="showDetail" :users="users" />
    </div>
</template>
<script>
import { mapState,mapGetters,mapMutations } from "vuex";
import { singleItemCalculate } from "@/utils/cartFn";
import orderBox from "@/components/orderBox/orderBox.vue"
import {AddCart,GetCartByTableId} from '@/api/order'

import { Toast } from 'vant';
import _ from 'lodash'
import {floatAdd} from '@/utils/util'
export default {
    name: 'cartControl',
    components: {
        orderBox
    },
    props: {
        disable: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            num: 0,
            tableObject:[],
            users: [{
                "nickName": "string",
                "headImg": require("@/assets/logo.png")
            }],
            timer:null
        }
    },
    computed:{
        ...mapState({
            shoppingList: (state) => {return _.cloneDeep(state.cartModule.shoppingList)},
            showDetail(state){ 
                return state.showDetail 
            }
        }),
        ...mapGetters({
            mapShoppingList: 'mapShoppingList',
        }),
        /**
         * @description 总价格
         */
        sumPrice() {
            let defaultPrice = 0;
            for (let item of this.mapShoppingList) {
                defaultPrice = floatAdd(defaultPrice,this.singleItemCalculate(item));
            }
            return defaultPrice;
        },
        /**
         * @description 计算商品数量
         */
        sumProduct() {
            let sum = 0;
            for (let item of this.shoppingList) {
                sum += item.qty
            }
            return sum;
        },
    },
    created(){
        this.reqGetCartByTableId()
        this.$store.state.timer = setInterval(()=>{
            //console.log(1)
            this.reqGetCartByTableId()
        },5000)
    },
    beforeDestroy() {
        clearInterval(this.$store.state.timer);
        this.$store.state.timer = null;
    },
    methods:{
        ...mapMutations([
            "increaseProCart",
            "decreaseProCart",
            "setShoppintList",
            "clearshoppingList",
            "modifyProNew",
        ]),
        singleItemCalculate,
        showDetailHandler(){
            this.$store.commit("showDetail", true); 
        },
        async addCart(newList){
            let param = {
                tableId: this.$store.state.tableInfo.tableId,
                peopleCount: this.$store.state.tableInfo.num,
                comment: "",
                items: newList
            }
            let { returnData = false }  = await AddCart(param)
            if(returnData == false) return
            this.tableObject = returnData
            // this.tableObject = [
            //     {
            //         "productId": "154cf763-3071-4859-b7d1-1b4a45cfd534",
            //         "mainImageUrl": "",
            //         "type": 0,
            //         "salePrice": 0,
            //         "isWeightingSale": false,
            //         "model": "",
            //         "productName": "上汤",
            //         "baseUnitId": "61c44948-bf4b-19b0-00df-85c75be6c7b1",
            //         "categoryId": "719e1b87-51c1-4ec1-bd45-ec67cf271e5e",
            //         "sellOut": false,
            //         "unitName": "克",
            //         "packages": [],
            //         "configs": [],
            //         "sku": [],
            //         "configSellOut": [],
            //         "qty": 0,
            //         "guid": "33c9550a-f60d-4778-9231-71657fee3c95",
            //         "sumCount": 1
            //     }
            // ]
            //!_.isEqual(this.$store.state.cartModule.shoppingList,this.tableObject)&&this.setShoppintList({list:this.tableObject})
        },
        /**
         * @description 订单详情
        */
        async reqGetCartByTableId() {
            let params={
                tableId: this.$store.state.tableInfo.tableId
            }
            let { returnData = false, isSuccess } = await GetCartByTableId(params);
            if (isSuccess == false) {
                this.setShoppintList({ list: [] });
                return;
            }
            this.users = returnData.users;
            this.tableObject = returnData.details;
            !_.isEqual(this.$store.state.cartModule.shoppingList,this.tableObject)&&this.setShoppintList({list:this.tableObject})
        },
        async toOrder(){
            if(this.$store.state.cartModule.shoppingList.length==0){
                Toast('请选择商品');
                return
            }
            this.reqGetCartByTableId()
            clearInterval(this.$store.state.timer)
            this.$store.state.timer = null;
            this.$router.push({path:'/toOrder'})
        },
        handleItems(list){
            list?.forEach(val => {
                if(val.packages){
                    val['items'] =  val.packages
                    delete val.packages
                }
            });
            return list
        }
    }
}
</script>
style
<style lang="scss" scoped>
    .cartControlBox{
        position: fixed;
        z-index: 24;
        left: 5.3%;
        bottom: 2.4%;
        right: 5.3%;
        height: 2.25rem;
        .cartControl{
            border-radius: 1.5rem;
            overflow: hidden;
            background-color: #171717;
            display: flex;
            align-items: center;
            .cartIcon{
                position: relative;
                display: block;
                margin-left: 0.25rem;
                width: 1.75rem;
                height: 1.75rem;
                background: url(~@/assets/cartIcon.png) no-repeat;
                background-size: cover;
                .num{
                    position: absolute;
                    top: -0.2rem;
                    right: -0.6rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    min-width: 0.8rem;
                    height: 0.8rem;
                    font-style: normal;
                    font-size: 0.6rem;
                    background-color: #ff0000;
                    color: #fff;
                }
            }
            .orderInfo{
                flex: 1;
                display: flex;
                align-items: center;
                .price{
                    color: #fff;
                    margin-left: 0.8rem;
                    font-size: 1.15rem;
                }
                .detailBtn{
                    border-left: 1px solid $mainColor;
                    padding-left: 0.5rem;
                    margin-left: 0.5rem;
                    color: $mainColor;
                    font-size: 0.6rem;
                }
            }
            .orderBtn{
                width: 4rem;
                height: 2.25rem;
                line-height: 2.25rem;
                font-size: 0.75rem;
                text-align: center;
                background-color: $mainColor;
            }
            &.disable{
                background-color: #666666;
                .cartIcon{
                    background: url(~@/assets/cartIcon_r.png) no-repeat;
                    background-size: cover;
                }
                .orderInfo{
                    .detailBtn{
                        border-left: none;
                        color: #929292;
                    }
                }
                .orderBtn{
                    background-color: #d0d0d0;
                }
            }
            
        }
    .tipBox{
            position: absolute;
            top: -2rem;
            left: 0;
            background-color: rgba($color: #000000, $alpha: 0.8);
            padding: .3rem .5rem;
            border-radius: .8rem;
            font-size: 0.6rem;
            color: #fff;
        }
    }
</style>